<!DOCTYPE html>
<!-- saved from url=(0062)http://x1.xiuimg.com/style/xiu/woxiu/v1/tpl/topic/xiuxuan.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>忆书杯</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="yes" name="apple-touch-fullscreen">
	<meta content="telephone=no,email=no" name="format-detection">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/normalize.css" type="text/css">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/book.css" type="text/css">
	<link rel="stylesheet" type="text/css" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/tipdisapply.css">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/small_page.css" type="text/css">
	<link rel="stylesheet" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/MemoryCup/Model.css" type="text/css">
</head>
<body>
	<div id="d1"></div>
 <div class="main">
	<div class="container">
		 <div class="box">
			 <img class="front" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/agent/ok/IMGL0006.JPG" alt="">
			 <img class="back" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/agent/ok/IMGL0007.jpg" alt="">
			 <img class="active" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/agent/ok/IMGL0011.jpg" alt="">
			 <div class="btns">
				 <span class="btn" id="prev"><</span>
				 <span class="btn" id="next">></span>
			 </div>
		 </div>
 	</div>
</div>
<div id="container1">
        <div id="list" style="left: 0px;">
            <div class="Wbox">
				<div>
					<span>
						<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/MemoryCup/Group7Copy2.png" alt="" class="WboxImg"/>
					</span>
					<span class="wb">微博书</span>
				</div>
				<p>作者：某某小天使</p>
				<p>创作时间：2018年5月6日</p>
				<p>简介：将高中的时光印刷在书中，为当时的校园生活感到</p>
				<p>快乐，也为自己平时虚度光阴而羞愧。。</p>
				<a href="" class="Button">查看内容范本</a>
			</div>
			<div class="Wbox" >
				<div>
					<span>
						<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/MemoryCup/Group6Copy2.png" alt="" class="WboxImg"/>
					</span>
					<span class="wb">微信书</span>
				</div>
				<p>作者：某某小天使</p>
				<p>创作时间：2018年5月6日</p>
				<p>简介：大学四年学校生活浓缩在这本书中，酸甜苦辣一个不</p>
				<p>少，反正无愧这四年就行。</p>
				<a href="" class="Button">查看内容范本</a>
			</div>
			<div class="Wbox">
				<div>
					<span>
						<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/MemoryCup/Group8Copy3.png" alt="" class="WboxImg"/>
					</span>
					<span class="wb">照片书</span>
				</div>
				<p>作者：某某小天使</p>
				<p>创作时间：2018年5月6日</p>
				<p>简介：我热衷于自己喜欢的事情，过于沉溺使得自己</p>
				<p>忘记了时间。</p>
				<a href="" class="Button">查看内容范本</a>
			</div>
			
        </div> 
        <!--<a href="javascript:;"  class="arrow">&lt;</a>
       		 <a href="javascript:;"  class="arrow">&gt;</a>-->
    </div>








</body>
<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/jisuan.js"></script>
<script>
		 window.onload=function(){
			console.log(11);
		var btns = document.getElementsByClassName('btn'),
		 imgs = document.getElementsByClassName('box')[0].getElementsByTagName('img');
		 
		var index = 2,
		 front = 0,
		 back = 0,
		 offset = false,
		// timer = setInterval(timer,10000000);
		  timer=timer;
		 
		 var list = document.getElementById('list');
		             var prev = document.getElementById('prev');
		            var next = document.getElementById('next')
					 
		
		 prev.onclick = function(){
		 	click(1);
			animate(10);
		// 	console.log(i);
		 	};
		next.onclick = function(){
		 	click(2);
			animate(-10);
		 };
		function click(x){
		imgs[index].setAttribute('class','');
		if(x === 0){
		 if(--index < 0){
		 index = --imgs.length;
		 }
		 front = back = index;
		 
		 if(++front > --imgs.length){
		 	front = 0
		 }
		 if(--back < 0){back = --imgs.length}
		 imgs[front].style.zIndex = '1';
		 imgs[back].style.zIndex = '0';
		}
		else{ 
		 if(++index > --imgs.length){
		 index = 0; 
		 }
		 front = back = index;
		 if(++front > --imgs.length){
		 	front = 0
		 	console.log(front);
		 }
		 if(--back < 0){
		 	back = --imgs.length
		 }
		 imgs[front].style.zIndex = '0';
		 imgs[back].style.zIndex = '1';
		}
		imgs[index].style.zIndex = '10';
		imgs[front].setAttribute('class','front')
		imgs[back].setAttribute('class','back') 
		imgs[index].setAttribute('class','active');
		}
		            
			function animate(offset) {
				//获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
				//且style.left获取的是字符串，需要用parseInt()取整转化为数字。
				var newLeft = parseInt(list.style.left) + offset;
				list.style.left = newLeft + 'rem';
				if(newLeft<-20){
					list.style.left = 0 + 'rem';
				}
				if(newLeft>0){
					list.style.left = -20 + 'rem';
				}
			}
		            
		}
</script>
</html>
